<template>
  <div class="search">
      <Card>
          <Form ref="searchForm" :model="queryParam" inline :label-width="70" class="search-form">
              <Form-item label="会员昵称" prop="memberNickName">
                  <Input type="text" v-model="queryParam.memberNickName" placeholder="会员昵称" clearable style="width: 200px" />
              </Form-item>
              <Form-item label="手机号" prop="memberMobile">
                  <Input type="text" v-model="queryParam.memberMobile" placeholder="手机号" clearable style="width: 200px" />
              </Form-item>
              <Form-item label="业务类型" prop="serviceType">
                <DictSelect
                  v-model="queryParam.serviceType"
                  placeholder="业务类型"
                  clearable
                  style="width: 200px"
                  dictCode="GOLDEN_BEAN_TYPE"
                />
              </Form-item>
              <Button @click="reloadData" type="primary" icon="ios-search" class="search-btn">搜索</Button>
              <Button @click="reloadData(true)" type="primary" icon="ios-refresh" class="search-btn">重置</Button>
          </Form>

          <Table :loading="loading" border :columns="columns" :data="dataSource" ref="table" class="mt_10"></Table>
          <Row type="flex" justify="end" class="mt_10">
              <Page v-bind="pageOption" v-on="pageListener"></Page>
          </Row>
      </Card>
  </div>
</template>

<script>
import { SimpleTableMixins } from '@/mixins/SimpleTableMixins.js'
import { getGoldenBean, getGoldenBeanVal } from '@/api/member.js'
import { getDictByKey } from "@/libs/dictStorage";

export default {
  mixins: [SimpleTableMixins],
  components: {
  },
  data() {
      let that = this
      return {
          baseParam: {
              sort: "createDate", // 默认排序字段
              order: "desc", // 默认排序方式
          },
          action: {
              listAction: getGoldenBean,
          },
          columns: [
            {
              title: "会员昵称",
              key: "memberNickName",
              minWidth: 100,
            },
            {
              title: "会员名称",
              key: "memberName",
              minWidth: 100,
            },
            {
              title: "会员手机号",
              key: "memberMobile",
              minWidth: 100,
            },
            {
              title: "金豆",
              key: "money",
              // width: 160,
              // sortable: true,
              render: (h, params) => {
                if (params.row.money > 0) {
                  return h("priceColorScheme", {
                    props: { value: params.row.money, color: "green", unit: "" },
                  });
                } else if (params.row.money < 0) {
                  return h("priceColorScheme", {
                    props: {
                      value: params.row.money,
                      color: this.$mainColor,
                      unit: "",
                    },
                  });
                }
                return h("priceColorScheme", {
                  props: {
                    value: params.row.money,
                    color: this.$mainColor,
                    unit: "",
                  },
                });
              },
            },
            {
              title: "业务类型",
              key: "serviceType",
              width: 200,
              render: (h, params) => {
                let showText = "";
                debugger
                if (params.row.serviceType) {
                  showText = getDictByKey(
                    "GOLDEN_BEAN_TYPE",
                    params.row.serviceType
                  );
                }
                return h("div", [h("span", {}, showText)]);
              },
            },
            {
              title: "日志明细	",
              key: "detail",
              // width: 160,
            },
            {
              title: "创建日期",
              key: "createDate",
              align: "left",
              width: 190,
              sortable: false,
            },
          ],
          beanInfo: {}
      };
  },
  methods: {
    reload() {
      this.reloadData()
    }
  },
  mounted() {
  },
};
</script>
<style lang="scss" scoped>

.pointsTitle {
  background-color: #fafafa;
  padding: 15px 20px;
  display: flex;
  font-size: 16px;
  line-height: 1.8;
  flex-direction: row;
  justify-content: space-around;
  color: #333;
  text-align: center;
  margin-bottom: 16px;
  .points-top-title{
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
    line-height: 14px;
    margin-bottom: 8px;
  }
  .points-top-text {
    font-size: 16px;
    font-weight: 500;
    color: #F56C1D;
    line-height: 16px;
  }
}
</style>
